<template>
	<el-dialog title="添加限购商品" :modal-append-to-body="false" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="1200px">
		<div class="form-box">
			<el-form ref="form" :model="form" :rules="rules" label-width="110px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="选择店铺" prop="shopId">
							<el-select v-model="form.shopId" filterable placeholder="请输入店铺名字或下拉选择" style="width: 100%;" @change="chooseShop">
								<el-option :label="item.shopName" :value="item.id" v-for="item of allShopList" :key="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row v-if="form.shopId !== ''">
					<el-col :span="12">
						<el-form-item label="选择商品" prop="skuSaleId">
							<el-input v-model="form.skuSaleName" placeholder="请从下方表格中选择商品" readonly></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="限购数量" prop="limitQuantity">
							<el-input v-model="form.limitQuantity" placeholder="请输入限购数量" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			
			<div v-if="form.shopId !== ''">
				<!-- 搜索商品 -->
				<div class="search-box">
					<el-form ref="queryForm" class="search-form" :inline="true" :model="queryForm" label-width="90px">
						<el-form-item label="商品名称" prop="productName">
							<el-input type="text" size="small" v-model="queryForm.productName" placeholder="请输入商品名称" style="width: 250px;"></el-input>
						</el-form-item>
						<el-form-item label="SKU条形码" prop="productBarCode">
							<el-input type="text" size="small" v-model="queryForm.productBarCode" placeholder="请输入条码" style="width: 150px;"></el-input>
						</el-form-item>
						<el-form-item label="销售渠道" prop="saleChannel">
							<el-select v-model="queryForm.saleChannel" size="small" placeholder="请选择" style="width: 120px;">
								<el-option label="全部" value=""></el-option>
								<el-option label="微信小程序" value="0"></el-option>
								<el-option label="商家/供应商" value="1"></el-option>
								<el-option label="直播平台" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<div class="search-submit">
								<el-button type="primary" size="small" @click="submitSearch">查询</el-button>
								<el-button size="small" @click="resetSearch">重置</el-button>
							</div>
						</el-form-item>
					</el-form>
				</div>
				
				<!-- 商品列表表格 -->
				<el-table :data="productList" stripe border style="width: 100%">
					<el-table-column type="index" fixed label="序号" width="50" align="center"></el-table-column>
					
					<el-table-column prop="skuThumbImage" label="缩略图" width="80" align="center">
						<template slot-scope="scope">
							<el-image style="width: 35px; height: 35px" :src="scope.row.skuThumbImage" :preview-src-list="[scope.row.skuThumbImage]"></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="productName" label="商品名称" align="center" width="180"></el-table-column>
					<el-table-column prop="productCode" label="商品编码" align="center" width="120"></el-table-column>
					<el-table-column prop="skuName" label="SKU名称" align="center" width="80"></el-table-column>
					<el-table-column prop="skuCode" label="SKU编码" align="center" width="120"></el-table-column>
					<el-table-column prop="priceShow" label="原价(元)" align="center" width="90"></el-table-column>
					<el-table-column prop="price" label="销售价(元)" align="center" width="90"></el-table-column>
					
					<el-table-column prop="saleChannel" label="销售渠道" align="center" width="100">
						<template slot-scope="scope">
							<el-tag size="small" type="success" v-if="scope.row.saleChannel == 1">商家/供应商</el-tag>
							<el-tag size="small" type="warning" v-else-if="scope.row.saleChannel == 2">直播平台</el-tag>
							<el-tag size="small" v-else>微信小程序</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="状态" align="center">
						<template slot-scope="scope">
							<el-tag size="small" :type="scope.row.status === 1 ? 'success' : 'warning'" disable-transitions>{{scope.row.status==0 ? "下架" : "上架"}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="saleStatus" label="售卖状态" align="center">
						<template slot-scope="scope">
							<el-tag size="small" :type="scope.row.saleStatus === 1 ? 'success' : 'info'" disable-transitions>{{scope.row.saleStatus == 0 ? "已停售" : "在售中"}}</el-tag>
						</template>
					</el-table-column>
					
					<el-table-column label="操作" fixed="right" width="120">
						<template slot-scope="scope">
							<el-button type="info" size="mini" v-if="scope.row.id == form.skuSaleId">已选择</el-button>
							<el-button type="primary" size="mini" @click="chooseProduct(scope.row)" v-else>点击选择</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="page">
					<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="[10, 20, 50, 100]"
						:page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total"
					></el-pagination>
				</div>
			</div>
		</div>
		
		<div slot="footer">
			<el-button type="primary" @click="submit">保 存</el-button>
			<el-button @click="close">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { getShopList } from '@api/shop/shop'
	import { findAllProductSkuSaleListByShop } from '@api/product/productSkuSale'
	import { addPurchaseProduct } from '@api/platform/platformProduct'
	export default {
		props: {
			isShow: Boolean,
		},
		data() {
			return {
				allShopList: [], //店铺列表
				
				//选择商品弹窗
				showChooseProductDialog: false,
				productList: [], //商品列表
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				form: {
					shopId: '',
					skuSaleId: '',
					skuSaleName: '',
					limitQuantity: '',
				},
				rules: {
					shopId: [{ required: true, message: '请选择店铺', trigger: 'blur' }],
					skuSaleId: [{ required: true, message: '请选择商品', trigger: 'blur' }],
					limitQuantity: [{ required: true, message: '请输入限购数量', trigger: 'blur' }],
				},
				
				queryForm: {
					productName: '',
					productBarCode: '',
					saleChannel: '',
				}
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.getAllShopData();
				}
			},
		},
		methods: {
			getAllShopData() { //获取全部店铺列表
				getShopList({
					pageNum: 1,
					pageSize: 9999
				})
					.then(res => {
						this.allShopList = res.data.content;
					})
			},
			
			getShopProduct() { //获取店铺商品
				findAllProductSkuSaleListByShop({
					shopId: this.form.shopId,
					productName: this.queryForm.productName,
					productBarCode: this.queryForm.productBarCode,
					status: 1,
					saleStatus: 1,
					saleChannel: this.queryForm.saleChannel,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.productList = res.data.content;
						this.total = res.data.total;
					})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getShopProduct();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getShopProduct();
			},
			submitSearch() {
				this.currentPage = 1;
				this.getShopProduct();
			},
			resetSearch() {
				this.queryForm.productName = '';
				this.queryForm.saleChannel = '';
				this.queryForm.productBarCode = '';
				this.getShopProduct();
			},
			
			chooseShop() { //选择店铺
				this.getShopProduct();
			},
			chooseProduct(item) { //选择商品
				this.form.skuSaleId = item.id;
				this.form.skuSaleName = item.productName;
			},
			
			submit() { //提交添加
				this.$refs.form.validate(valid => {
					if (valid) {
						let params = {
							skuSaleId: this.form.skuSaleId,
							limitQuantity: this.form.limitQuantity,
						}
						
						addPurchaseProduct(params)
							.then(res => {
								this.$message.success('限购商品添加成功！');
								this.close();
								
								this.$emit('submit');
							})
					}
				})
			},
			
			reset() {
				this.form.shopId = '';
				this.form.skuSaleId = '';
				this.form.skuSaleName = '';
				this.form.limitQuantity = '';
				
				this.queryForm.productName = '';
				this.queryForm.saleChannel = '';
			},
			close() {
				this.$emit('close');
				this.reset();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		background: #f4f4f4;
		padding: 8px;
		.search-form > div {
			width: auto;
		}
		.el-form-item {
			margin-bottom: 0;
		}
		.search-submit {
			height: 40px;
			align-items: center;
			display: flex;
			padding-left: 30px;
		}
	}
	.el-table {
		::v-deep .el-table__cell {
			padding: 5px 0;
		}
	}
	.page {
		margin-top: 10px;
	}
</style>